<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram of a Sphere Rolling on a Cylinder</title>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="420"></canvas>
<script>
  const canvas = document.getElementById('physicsCanvas');
  const ctx = canvas.getContext('2d');

  // Style settings
  ctx.strokeStyle = 'black';
  ctx.fillStyle = 'black';
  ctx.lineWidth = 2;

  // Helper function to draw an arrow
  function drawArrow(fromx, fromy, tox, toy) {
    const headlen = 10; // length of head in pixels
    const dx = tox - fromx;
    const dy = toy - fromy;
    const angle = Math.atan2(dy, dx);
    ctx.beginPath();
    ctx.moveTo(fromx, fromy);
    ctx.lineTo(tox, toy);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(tox, toy);
    ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
    ctx.moveTo(tox, toy);
    ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
    ctx.stroke();
  }
  
  // Parameters
  const cx = 230;
  const cy = 230;
  const b = 100;
  const a = 45;
  const theta = (40 * Math.PI) / 180; // Angle in radians

  // Positions
  const c2x = cx + (a + b) * Math.sin(theta);
  const c2y = cy - (a + b) * Math.cos(theta);
  const contactX = cx + b * Math.sin(theta);
  const contactY = cy - b * Math.cos(theta);

  // Draw Ground Line
  ctx.beginPath();
  ctx.moveTo(cx - 1.5 * b, cy + b);
  ctx.lineTo(cx + 1.5 * b, cy + b);
  ctx.stroke();

  // Draw Large Cylinder
  ctx.beginPath();
  ctx.arc(cx, cy, b, 0, 2 * Math.PI);
  ctx.stroke();

  // Draw Small Sphere
  ctx.beginPath();
  ctx.arc(c2x, c2y, a, 0, 2 * Math.PI);
  ctx.stroke();

  // Draw Dashed Lines
  ctx.save();
  ctx.setLineDash([5, 5]);
  // Vertical line through O
  ctx.beginPath();
  ctx.moveTo(cx, cy - b);
  ctx.lineTo(cx, cy + b);
  ctx.stroke();
  // Line O to O'
  ctx.beginPath();
  ctx.moveTo(cx, cy);
  ctx.lineTo(c2x, c2y);
  ctx.stroke();
  ctx.restore();

  // Draw Radii
  // Radius b
  ctx.beginPath();
  ctx.moveTo(cx, cy);
  ctx.lineTo(contactX, contactY);
  ctx.stroke();
  // Radius a
  ctx.beginPath();
  ctx.moveTo(c2x, c2y);
  ctx.lineTo(contactX, contactY);
  ctx.stroke();
  
  // Draw Angle Arc
  ctx.beginPath();
  ctx.arc(cx, cy, 40, -Math.PI / 2, -Math.PI / 2 + theta);
  ctx.stroke();

  // Draw Forces
  const forceLen = 60;
  // mg
  drawArrow(c2x, c2y, c2x, c2y + forceLen);
  // N (Normal force)
  drawArrow(contactX, contactY, c2x, c2y);
  // f (Friction)
  const f_len = 50;
  drawArrow(contactX, contactY, contactX - f_len * Math.cos(theta), contactY - f_len * Math.sin(theta));

  // Draw Angular Velocity Arrow (clockwise)
  const arcRadius = a + 12;
  const startAngle = -Math.PI / 3.5;
  const endAngle = Math.PI / 3.5;
  ctx.beginPath();
  ctx.arc(c2x, c2y, arcRadius, startAngle, endAngle, false); // false for clockwise
  ctx.stroke();
  
  // Arrowhead for the arc
  const headlen = 10;
  const arrowX = c2x + arcRadius * Math.cos(endAngle);
  const arrowY = c2y + arcRadius * Math.sin(endAngle);
  const tangentAngle = endAngle - Math.PI / 2; // Tangent angle for clockwise rotation
  ctx.beginPath();
  ctx.moveTo(arrowX, arrowY);
  ctx.lineTo(arrowX - headlen * Math.cos(tangentAngle - Math.PI / 6), arrowY - headlen * Math.sin(tangentAngle - Math.PI / 6));
  ctx.moveTo(arrowX, arrowY);
  ctx.lineTo(arrowX - headlen * Math.cos(tangentAngle + Math.PI / 6), arrowY - headlen * Math.sin(tangentAngle + Math.PI / 6));
  ctx.stroke();
  
  // Add Labels
  ctx.font = 'italic 20px Times New Roman';
  // Centers
  ctx.fillText('O', cx - 20, cy + 8);
  ctx.fillText("O'", c2x + 8, c2y - 8);
  // Radii
  ctx.fillText('b', cx + b * 0.5 * Math.sin(theta) - 20, cy - b * 0.5 * Math.cos(theta) + 10);
  ctx.fillText('a', c2x - a * 0.5 * Math.sin(theta) - 15, c2y + a * 0.5 * Math.cos(theta) + 5);
  // Angle
  ctx.fillText('θ', cx + 50 * Math.sin(theta/2) - 5, cy - 50 * Math.cos(theta/2) + 10);
  // Forces
  ctx.fillText('mg', c2x + 10, c2y + forceLen + 10);
  ctx.fillText('N', contactX + (a/2)*Math.sin(theta) + 5, contactY - (a/2)*Math.cos(theta) - 5);
  ctx.fillText('f', contactX - f_len * Math.cos(theta) - 20, contactY - f_len * Math.sin(theta));
  // Angular velocity
  ctx.fillText('φ\u02D9', c2x + a + 20, c2y + 15);

  // Figure caption
  ctx.font = '18px Times New Roman';
  ctx.fillText('Fig. 1.162.', 210, cy + b + 50);

</script>
</body>
</html>